<template>
  <default-layout>
    <header-close :text="text" :fixed="false" slot="header">
      <mt-button
        slot="left"
        @click="$router.replace({name: 'home'})"
        icon="back"
        v-if="$route.name === 'shareNewsDetail'">返回首页</mt-button>
      <mt-button slot="right" @click="doShare">
        <i class="xffont xf-fenxiang" slot="icon"></i>&nbsp;分享
      </mt-button>
    </header-close>
    <div class="news-detail" slot="main" v-if="!loading">
      <h1>{{detail.cand03}}</h1>
      <div class="desc">
        <div class="date">发布时间：{{$dateFormat(detail.canc11).format('YYYY-MM-DD')}}</div>
        <div class="read">
          <span>{{detail.cand13}} 阅读</span>
        </div>
      </div>
      <div class="info" v-html="detail.cand04" ref="info"></div>
    </div>
    <loading-text v-if="loading" slot="main"></loading-text>
    <xf-share ref="share"></xf-share>
  </default-layout>
</template>
<script>
  import HeaderClose from '../../components/header-close/header-close.vue'
  import {http} from '../../common/js/util'
  import qs from 'querystring'
  import DefaultLayout from '../../layouts/default-layout/default-layout'
  import $ from 'jquery'
  import LoadingText from '../../components/loading-text/loading-text'
  import XfShare from '../../components/xf-share/xf-share'

  export default {
    components: {XfShare, LoadingText, DefaultLayout, HeaderClose},
    data() {
      return {
        text: '新闻详情',
        detail: {},
        loading: false
      }
    },
    methods: {
      doShare() {
        this.$refs.share.run()
      },
      getDetail() {
        http({
          method: 'post',
          url: '/sapi/news/get/article/detail',
          data: {
            articleid: this.$route.query.cand01
          }
        }, loading => { this.loading = loading }).then(res => {
          let prefix = GLOBAL_CONF.STATIC_URL
          const html = $('<div>' + res.data.artice.cand04 + '</div>')
          html.find('img').each(function() {
            // 如果图片的父元素为 p 标签，则去除p标签的 text-indent
            $(this).parents().each(function() {
              if ($(this).get(0).tagName.toLowerCase() === 'p') {
                $(this).css({
                  'text-indent': '0'
                })
              }
            })
            $(this).attr('src', $(this).attr('src').replace(/fileDirectory\//, prefix)).css({
              'max-width': '100%',
              'text-indent': '0',
              'height': 'auto'
            })
          })
          html.find('a').each(function() {
            let href = $(this).attr('href')
            if (!/^http(s?):/i.test(href)) {
              $(this).attr('href', $(this).attr('href').replace(/fileDirectory\//, prefix))
            }
          })
          html.find('video').each(function() {
            let src = $(this).attr('src')
            if (!/^http(s?):/i.test(src)) {
              $(this).attr('src', $(this).attr('src').replace(/fileDirectory\//, prefix))
            }
          })
          html.find('p').each(function() {
            $(this).css({'max-width': '100%'})
          })
          res.data.artice.cand04 = html.html()
          this.detail = res.data.artice
          this.$refs.share.init({
            title: this.detail.cand03,
            desc: this.detail.cand15,
            link: location.href.split('#')[0] + `#/news-detail?${qs.stringify(this.$route.query)}`
          })
        })
      }
    },
    created() {
      this.getDetail()
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  @import "../../common/style/news-info";
  .read{
    display: flex;
    justify-content: flex-end;
    width: 50%;
  }
</style>
